<template>
  <div class="app-container">
    <div>测试页面,可拖拽</div>
    <grid-layout
      :layout.sync="layout"
      :col-num="colNum"
      :row-height="50"
      :is-draggable="true"
      :is-resizable="false"
      :vertical-compact="verticalCompact"
      :margin="[10, 10]"
      :use-css-transforms="false"
      class="hoverStyle"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        style="border: 1px solid #fff;"
      >
        <div style="border: 1px solid #ccc;padding: 15px 0px;height: 50px;border-radius: 5px;">
          <div class="logo" />
          <div class="txt" style="text-align: center;">
            <a v-if="item.sysUrl !== ''" :href="item.sysUrl" target="_blank">{{ item.sysName }}</a>
            <a v-else href="javascript:;" target="_blank">{{ item.sysName }}</a>
          </div>
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 1, i: 0, sysName: '应用系统demo1', sysUrl: 'http://127.0.0.1:10003/index' },
        { x: 2, y: 0, w: 2, h: 1, i: 1, sysName: '应用系统demo2', sysUrl: '#' },
        { x: 4, y: 0, w: 2, h: 1, i: 2, sysName: '应用系统demo3', sysUrl: '#' }
      ],
      verticalCompact: true,
      colNum: 12
    }
  },
  watch: {

  },
  created() {

  },
  methods: {
  }
}
</script>
